<template>
   <div style="width: 1200px; margin: 0 auto;">
     <el-row :gutter="10">
       <el-col :span="4">
         <img src="imgs/tuan1.png" >
         <img src="imgs/tuan2.png" style="margin-top: 15px;">
         <img src="imgs/tuan3.png" style="margin-top: 15px;">
       </el-col>
       <el-col :span="20">
         <div style="margin-left: 20px">
           <el-menu default-active="1"  mode="horizontal" style="background-color: white;width: 815px;height: 30px">
             <el-menu-item index="1">日本</el-menu-item>
             <el-menu-item index="2">冰岛</el-menu-item>
             <el-menu-item index="3">泰国</el-menu-item>
             <el-menu-item index="4">马尔代夫</el-menu-item>
             <el-menu-item index="5">瑞士</el-menu-item>
             <el-menu-item index="6">新加坡</el-menu-item>
             <el-menu-item index="7">澳门</el-menu-item>
             <el-menu-item index="8">普吉岛</el-menu-item>
           </el-menu>
           <el-row >
             <el-col :span="5">
               <el-card  style="width: 200px;height: 285px">
                 <router-link to="/japan" style="text-decoration: none">
                 <div>
                   <img src="/imgs/a.jpg" style="width:150px;height: 150px">
                   <p  style="font-size: 12px;color: black">日本大阪+京都+奈良5日4晚私家团·赏枫·2晚京都|...</p>
                   <p  style="font-size: 25px;color: orange;float: left;margin-top: 10px">￥3612</p>
                 </div>
                 </router-link>
             </el-card>
             </el-col>
             <el-col :span="5">
               <el-card  style="width: 200px;height: 285px">
                 <router-link to="/japan" style="text-decoration: none">
                 <div>
                   <img src="/imgs/b.jpg" style="width:150px;height: 150px">
                   <p  style="font-size: 12px;color: black">日本东京+富士山+镰仓市5日4晚半自助游·【海街日...</p>
                   <p  style="font-size: 25px;color: orange;float: left;margin-top: 10px">￥12</p>
                 </div>
                 </router-link>
               </el-card>
             </el-col>
             <el-col :span="5">
               <el-card  style="width: 200px;height: 285px">
                 <router-link to="/japan" style="text-decoration: none">
                 <div>
                   <img src="/imgs/c.jpg" style="width:150px;height: 150px">
                   <p  style="font-size: 12px;color: black">日本大阪+京都7日6晚私家团·赏枫·含环球影城1.5...</p>
                   <p  style="font-size: 25px;color: orange;float: left;margin-top: 10px">￥612</p>
                 </div>
                 </router-link>
               </el-card>
             </el-col>
             <el-col :span="5">
               <el-card  style="width: 200px;height: 285px">
                 <router-link to="/japan" style="text-decoration: none">
                 <div>
                   <img src="/imgs/d.jpg" style="width:150px;height: 150px">
                   <p  style="font-size: 12px;color: black">日本大阪+京都+奈良6日5晚半自助游·【关西物语·...</p>
                   <p  style="font-size: 25px;color: orange;float: left;margin-top: 10px">￥362</p>
                 </div>
                 </router-link>
               </el-card>
             </el-col>
           </el-row>
         </div>
         <div style="margin-left: 20px;margin-top: 20px">
           <el-menu default-active="1"  mode="horizontal" style="background-color: white;width: 815px;height: 30px">
             <el-menu-item index="1">九寨沟</el-menu-item>
             <el-menu-item index="2">三亚</el-menu-item>
             <el-menu-item index="3">云南</el-menu-item>
             <el-menu-item index="4">成都</el-menu-item>
             <el-menu-item index="5">厦门</el-menu-item>
             <el-menu-item index="6">桂林</el-menu-item>
             <el-menu-item index="7">贵州</el-menu-item>
             <el-menu-item index="8">古北水镇</el-menu-item>
           </el-menu>
           <el-row>
             <el-col :span="5" v-for="p in productArr">
               <el-card  style="width: 200px;height: 285px">
               <img :src="p.url" style="width:150px;height: 150px">
               <p  style="font-size: 12px;color: black">{{ p.title }}</p>
               <p  style="font-size: 25px;color: orange;float: left;margin-top: 10px">￥{{ p.price }}</p>
             </el-card>
             </el-col>
           </el-row>
         </div>
         <div style="margin-left: 20px;margin-top: 20px">
           <el-menu default-active="1"  mode="horizontal" style="background-color: white;width: 815px;height: 30px">
             <el-menu-item index="1">天津</el-menu-item>
             <el-menu-item index="2">北京</el-menu-item>
             <el-menu-item index="3">秦皇岛</el-menu-item>
             <el-menu-item index="4">济南</el-menu-item>
             <el-menu-item index="5">承德</el-menu-item>
             <el-menu-item index="6">黄山</el-menu-item>
             <el-menu-item index="7">石家庄</el-menu-item>
             <el-menu-item index="8">张家口</el-menu-item>
           </el-menu>
           <el-row>
             <el-col :span="5" v-for="p in productArr"> <el-card  style="width: 200px;height: 285px">
               <img :src="p.url" style="width:150px;height: 150px">
               <p  style="font-size: 12px;color: black">{{ p.title }}</p>
               <p  style="font-size: 25px;color: orange;float: left;margin-top: 10px">￥{{ p.price }}</p>
             </el-card></el-col>
           </el-row>
         </div>
       </el-col>
     </el-row>
   </div>
</template>

<script setup>
import {ref} from "vue";
const productArr = ref([{title:"日本大阪+京都+奈良5日4晚私家团·赏枫·2晚京都|...", price: 3612,url: "/imgs/a.jpg"},
                      {title: "马来西亚仙本那+吉隆坡7日6晚半自助游·中文导游...", price: 4009,url: "/imgs/b.jpg"},
                      {title: "泰国普吉岛6日5晚半自助游·泰国免签【2-9人真...", price: 2257,url: "/imgs/c.jpg"},
                      {title: "香港+澳门2日1晚跟团游·【甄选中环网红线※销...", price: 613,url: "/imgs/d.jpg"}])


</script>

<style scoped>

</style>